<template>
    <view class="popup-share">
        <view class="share-btn">
            <image src="@/static/icon/wechat.png" @tap="openBtn" />
        </view>

        <button plain open-type="contact" class="kefy-btn">
            <image class="kefy-btn__img" src="@/static/icon/icon-kf.png" @tap="openBtn" />
        </button>

        <view class="popup-share--btn">
            <cl-popup direction="bottom" :force-update="false" :visible.sync="btn.visible">
                <view class="share-method">
                    <button class="is-btn share-friend" open-type="share" @tap="closeBtn">
                        发给朋友
                    </button>
                    <button class="is-pic share-generate" @tap="openPic">生成海报</button>
                </view>
            </cl-popup>
        </view>

        <view class="popup-share--pic">
            <cl-popup direction="center" :visible.sync="pic.visible">
                <img class="popup-share__cover" :src="pic.url" />
                <button class="popup-share__btn" @tap="savePic">
                    保存图片
                </button>
            </cl-popup>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            btn: {
                visible: false
            },
            pic: {
                visible: false,
                url: ''
            }
        };
    },
    methods: {
        savePic() {
            uni.reportAnalytics('click_sharefriend');

            uni.downloadFile({
                url: this.pic.url,
                success: res => {
                    uni.saveImageToPhotosAlbum({
                        filePath: res.tempFilePath,
                        success: () => {
                            uni.showToast({
                                title: '保存图片成功',
                                icon: 'none'
                            });

                            this.close();
                        },
                        fail: err => {
                            uni.showToast({
                                title: '请允许访问相册后重试',
                                icon: 'none'
                            });
                        }
                    });
                }
            });
        },

        openBtn() {
            this.$root.openRP(() => {
                this.btn.visible = true;
            });
            uni.reportAnalytics('click_sharebtn', {});
        },

        openPic() {
            uni.showLoading();
            uni.reportAnalytics('click_sharegenerate', {});

            this.$service.common
                .wxJljSharePic()
                .then(res => {
                    this.pic.url = res.url;
                    this.pic.visible = true;
                    this.closeBtn();

                    uni.hideLoading();
                })
                .catch(err => {
                    uni.hideLoading();
                    uni.showToast({
                        title: err,
                        icon: 'none'
                    });
                });
        },

        close() {
            this.pic.visible = false;
        },

        closeBtn() {
            this.btn.visible = false;
            uni.reportAnalytics('click_sharefriend', {});
        }
    }
};
</script>

<style lang="scss" scoped>
.popup-share {
    &__cover {
        display: block;
        height: 820rpx;
        width: 580rpx;
    }

    &__btn {
        font-size: 28rpx;
        margin-top: 100rpx;
        border-radius: 30rpx;
        width: 300rpx;

        &::after {
            border: 0;
        }
    }

    .share-btn {
        position: fixed;
        right: 30rpx;
        bottom: 360rpx;
        height: 80rpx;
        width: 80rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #fff;
        border-radius: 80rpx;
        border: 1rpx solid #eee;
        box-sizing: border-box;

        image {
            display: block;
            height: 50rpx;
            width: 50rpx;
            animation: heartBeat 1.5s infinite linear;
        }

        @keyframes heartBeat {
            0% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.2);
            }

            100% {
                transform: scale(1);
            }
        }
    }
    .kefy-btn {
        position: fixed;
        right: 20rpx;
        bottom: 240rpx;
        height: 104rpx;
        width: 104rpx;
        border: none;
        padding: 0;
        margin: 0;

        &__img {
            width: 100%;
            height: 100%;
        }
    }

    .share-method {
        button {
            height: 100rpx;
            line-height: 100rpx;
            text-align: center;
            font-size: 32rpx;
            background-color: #fff;
            border-radius: 0;
            border-bottom: 1rpx solid #eee;

            &::after {
                border: 0;
            }

            &:last-child {
                border-bottom: 0;
            }
        }
    }
}
</style>
